<template>
  <h2>心血管病分析</h2>
  <hr style="margin-top: 10px" />
  <div id="main_echarts">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="echarts-div" id="relation">图1 relation</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="echarts-div" id="bmi">图1 bmi</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get } from "../../utils/com";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Heart2",
  setup() {
    const relation_data = [0];
    const bmi_data = [[[],[]],[[],[]],[[],[]],[[],[]]];
    return {
      relation_data,
      bmi_data,
    };
  },
  methods: {
    initCharts() {
      this.relation_chart = this.$echarts.init(document.getElementById("relation"));
      this.relation_setOptions();
      this.bmi_chart = this.$echarts.init(document.getElementById("bmi"));
      this.bmi_setOptions();
    },
    relation_setOptions() {
      var data = this.relation_data;
      // console.log(data["x"])
      //   console.log(22222, this.relation_chart, data);
      this.relation_chart.setOption({
        title: {
          text: "各参数的相关矩阵（相互影响）",
          left: "center",
        },
        tooltip: {
          position: "top",
        },
        grid: {
          height: "50%",
          top: "10%",
        },
        xAxis: {
          type: "category",
          data: data["x"],
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: data["y"],
          splitArea: {
            show: true,
          },
        },
        visualMap: {
          min: 0,
          max: 1,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "15%",
        },
        series: [
          {
            name: "Punch Card",
            type: "heatmap",
            data: data["data"],
            label: {
              show: true,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    relation_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/heart/relation").then(function (res) {
        var mydata = [];
        mydata["y"] = res["index"];
        mydata["x"] = res["columns"];

        var rdata = res["data"];

        // console.log(rdata);
        // console.log(rdata[0]);
        // console.log(rdata[0][0]);
        // console.log(rdata["length"]);
        var ynum = rdata["length"];
        var xnum = ynum;
        var Hdata = [];

        for (var y = ynum - 1; y >= 0; y--) {
          (function (y) {
            for (var y2 = 0; y2 < xnum; y2++) {
              //   console.log("y ====" + y);
              //   console.log("y2 ====" + y2);
              //   console.log(rdata[y][y2]);
              //   Hdata[13 - y][y2] = [13 - y, y2, rdata[y][y2]];
              Hdata[Hdata.length] = [13 - y, y2, Math.abs(rdata[y][y2].toFixed(5))];
            }
          })(y);
        }

        mydata["data"] = Hdata;
        _this.relation_data = mydata;
        _this.relation_setOptions();
        return res;
      });
    },
    bmi_setOptions() {
      var data = this.bmi_data;
      //   console.log(22222, this.bmi_chart, data);
      this.bmi_chart.setOption({
        title: {
          text: "性别、饮酒、病患的BMI指数比较",
          left: "center",
        },
        dataset: [
          {
            source: data[0],
          },
          {
            source: data[1],
          },
          {
            source: data[2],
          },
          {
            source: data[3],
          },
          {
            fromDatasetIndex: 0,
            transform: { type: "boxplot" },
          },
          {
            fromDatasetIndex: 1,
            transform: { type: "boxplot" },
          },
          {
            fromDatasetIndex: 2,
            transform: { type: "boxplot" },
          },
          {
            fromDatasetIndex: 3,
            transform: { type: "boxplot" },
          },
        ],
        legend: {
          top: "10%",
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "10%",
          top: "20%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          nameGap: 30,
          axisLabel: {
            show: true,
            textStyle: {
              color: "red",
            },
            formatter: function (value, index) {
              if (value == 0) {
                return "不患";
              }
              return "患";
            },
          },
          splitArea: {
            show: true,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "Value",
          min: 0,
          max: 50,
          splitArea: {
            show: false,
          },
        },
        series: [
          {
            name: "女性不饮酒",
            type: "boxplot",
            datasetIndex: 4,
          },
          {
            name: "女性饮酒",
            type: "boxplot",
            datasetIndex: 5,
          },
          {
            name: "男性不饮酒",
            type: "boxplot",
            datasetIndex: 6,
          },
          {
            name: "男性饮酒",
            type: "boxplot",
            datasetIndex: 7,
          },
        ],
      });
    },
    bmi_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/heart/bmi").then(function (res) {
        // console.log(res);
        var mydata = [];
        var data1 = []
        var data2 = []
        var data3 = []
        var data4 = []

        var data11 = []
        var data12 = []
        var data21 = []
        var data22 = []
        var data31 = []
        var data32 = []
        var data41 = []
        var data42 = []

        // console.log(res["1"]);
        console.log(mydata);
        for (var key in res) {
          var flag = res[key];
          if (flag["cardio"] == 0) {
            if (flag["gender"] == 1) {
              if (flag["alco"] == 0) {
                console.log("010");
                // mydata["1-1"] = flag["BMI"];
                data11.push(flag["BMI"])
              } else if (flag["alco"] == 1) {
                console.log("011");
                // mydata["1-2"] = flag["BMI"];
                data12.push(flag["BMI"])
              }
            } else if (flag["gender"] == 2) {
              if (flag["alco"] == 0) {
                console.log("020");
                // mydata["2-1"] = flag["BMI"];
                data21.push(flag["BMI"])
              } else if (flag["alco"] == 1) {
                console.log("021");
                // mydata["2-2"] = flag["BMI"];
                data22.push(flag["BMI"])
              }
            }
          } else if (flag["cardio"] == 1) {
            if (flag["gender"] == 1) {
              if (flag["alco"] == 0) {
                console.log("110");
                // mydata["3-1"] = flag["BMI"];
                data31.push(flag["BMI"])
              } else if (flag["alco"] == 1) {
                console.log("111");
                // mydata["3-2"] = flag["BMI"];
                data32.push(flag["BMI"])
              }
            } else if (flag["gender"] == 2) {
              if (flag["alco"] == 0) {
                console.log("120");
                // mydata["4-1"] = flag["BMI"];
                data41.push(flag["BMI"])
              } else if (flag["alco"] == 1) {
                console.log("121");
                // mydata["4-2"] = flag["BMI"];
                data42.push(flag["BMI"])
              }
            }
          }
        }


        data1.push(data11)
        data1.push(data31)
        data2.push(data12)
        data2.push(data32)
        data3.push(data21)
        data3.push(data41)
        data4.push(data22)
        data4.push(data42)
        mydata.push(data1)
        mydata.push(data2)
        mydata.push(data3)
        mydata.push(data4)
        _this.bmi_data = mydata;
        _this.bmi_setOptions();
        return res;
      });
    },
  },
  mounted() {
    const _this = this;
    this.initCharts();

    this.relation_axios();
    this.bmi_axios();
  },
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin: 5px;
  height: 400px;
  width: 100%;
  border-radius: 4px;
  min-height: 36px;
  border: 3px solid rgb(90, 89, 89);
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.echarts-div {
  height: 99%;
  width: 99%;
}
</style>
